<%@page import="Logic.Authorizer"%>
<%@page import="servlet.AppttypeDropdown"%>
<%@page import="servlet.StaffappStaffDropdown"%>
<%@page import="servlet.DiplomaDropDown"%>
<%@page import="servlet.YearDropDown"%>
<%@page import="servlet.Emailer"%>
<%@page import="servlet.YearNoDropDown"%>
<%@page import="Logic.EmailerJob"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%
        if (session.getAttribute("name") == null) {
                response.sendRedirect("login.jsp");
        } else {
                if (Authorizer.checkRole("1", session.getAttribute("role")
                                .toString())||Authorizer.checkRole("3", session.getAttribute("role")
                                        .toString()) || (session
                								.getAttribute("role").equals("2")))  {
                        
                }
                else
                	response.sendRedirect("nopermission.jsp");
        }
%>
<%int counteralt = 0;
 int counteralt1 = 0; %>
<!-- Declare the first header -->
<jsp:include page="t_header.jsp" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<!-- script for adding and removing staffnames from textarea -->
<script type="text/javascript">

        function addStaff() {
                var substring = "Staff is already appointed to this appointment!";
                var substringpending = "Staff is already appointed to this appointment.";
                var fullstring = document.getElementById("staffdetails").innerHTML;
                if (fullstring.indexOf(substring) != -1) {
            alert("Staff is already appointed to this appointment.\nResult : Approved.");
        }
                else if (fullstring.indexOf(substringpending) != -1) {
                        alert ("Staff is already appointed to this appointment,\nResult : Pending.");
        }
        else{
        
                var stafflist = document.getElementById("staffnames");
                
                var e = document.getElementById("selectstaff");
                
                var name = e.options[e.selectedIndex].text;
                
                var id = e.options[e.selectedIndex].value;
                if(isOptionAlreadyExist(stafflist,id)){
                        alert('Staff already added');
                        return false;
                }
                
                var staff = document.getElementById("staff").value;
                
                var array = staff.split(', ');

                if (staff == "") {
                        document.getElementById("staff").value = id;
                } else {
                        if (jQuery.inArray(name, array) == -1) {
                                staff = staff.concat(', ');
                                document.getElementById("staff").value = staff
                                                .concat(id);
                        }
                }

                var optn = document.createElement("option");
                
                optn.text = name;
                
                optn.value = id;
                
                stafflist.add(optn,null);

        }
}
        
        function isOptionAlreadyExist(listBox,value){
                var exists=false;
                
                for(var x=0; x<listBox.options.length; x++){
                        
                        if(listBox.options[x].value==value || listBox.options[x].text==value){ 
                                
                                exists=true;
                                
                                break;
                        }
                }
                return exists;
        }

        function removeStaff() {
                //document.getElementById("newApp").style.display="none";
                var stafflist = document.getElementById("staffnames");
                
                var optionToRemove =stafflist.options.selectedIndex;
                
                stafflist.remove(optionToRemove);
                
                var tempStaff = "";
                
                for(var x=0;x<stafflist.options.length;x++){
                        if (tempStaff == "") {
                                tempStaff = stafflist.options[x].value;
                        } else {
                                tempStaff = tempStaff.concat(', ');
                                tempStaff = tempStaff.concat(stafflist.options[x].value);
                        }
                }
        
                document.getElementById("staff").value = tempStaff;
                

                
                return true;
        }
        
        function addAppointment() {

                var e = document.getElementById("appointment");
                var name = e.options[e.selectedIndex].value;
                var staff = document.getElementById("appointmentnames").value;

                var array = staff.split(', ');

                if (staff == "") {
                        document.getElementById("appointmentnames").value = name;
                } else {
                        if (jQuery.inArray(name, array) == -1) {
                                staff = staff.concat(', ');
                                document.getElementById("appointmentnames").value = staff
                                                .concat(name);
                        }
                }

        }

        function removeAppointment() {
                var staff = document.getElementById("appointmentnames").value;

                var array = staff.split(',');
                
                if (staff != "") {
                        array.pop();
                        document.getElementById("appointmentnames").value = array;
                }
        }
        
        
        function classgather (list){
        var apptid = document.getElementById("appointment").value; 
        if(apptid == 102){
        var x = document.getElementById("diploma").value;
        var y = document.getElementById("year").value;
        var z = document.getElementById("yearNo").value;
        var sel = document.getElementById("class");
        var sv = sel.options[sel.selectedIndex].text;
        if(x == ""){
        }
        else
        {
        var classCom = x+y+sv;
        document.getElementById("nameclass").value = classCom;
        document.getElementById("classcombinedfortable").value = classCom;
        }
        }
      
        }
   
        
        
        function reload (list) {
                reload1();
                reload1new();
                
                $(".specialtable tr").remove();
                document.getElementById("specialtablerownumber").value = 0;
        
                var x = document.getElementById("appointment").value;
                document.getElementById("appointmentnormal").value = parseInt(x);
                document.getElementById("appointmentnormalnew").value = parseInt(x);
                
        if(x == 101 || x == 102 || x == 103 || x == 20){
                document.getElementById("newApp").style.display="none";
                document.getElementById("newApp2").style.display="block";
                
                if(x==101){
                document.getElementById("class").style.display="none";
                document.getElementById("year").style.display="block";
                document.getElementById("yearNo").style.display="none";
                //Below method is to let it not enabled.
                //$("#class").attr("disabled", true);
                //$("#year").attr("disabled", false);
                }
                else if(x==102){
                document.getElementById("class").style.display="block";
                document.getElementById("year").style.display="block";
                document.getElementById("yearNo").style.display="none";
                //$("#class").attr("disabled", false);
                //$("#year").attr("disabled", false);
                }
                else if(x==103){
                document.getElementById("class").style.display="none";
                document.getElementById("year").style.display="none";
                document.getElementById("yearNo").style.display="none";
                //$("#class").attr("disabled", true);
                //$("#year").attr("disabled", true);
                }
                else if(x==20){
                    document.getElementById("class").style.display="none";
                    document.getElementById("year").style.display="none";
                    document.getElementById("yearNo").style.display="block";
                //$("#class").attr("disabled", true);
                //$("#year").attr("disabled", false);
                }
                }
        else{
                document.getElementById("newApp").style.display="block";
                document.getElementById("newApp2").style.display="none";
        }
        
        if(x == "nill")
        {
        document.getElementById("newApp").style.display="none";
        document.getElementById("newApp2").style.display="none";
        }
                
  
        };
        
        
        function reload1 (list) {
                
                var staffid1 = $("#selectstaff").val();
                var appointmentid1 = $("#appointment").val();
                 $.ajax({
             url: 'StaffappStaffSidebox',
             data: {staffid :staffid1, appointmentid : appointmentid1},
             type: 'get',
             success: function(msg){
                  document.getElementById('staffdetails').style.display = 'block';
                  $("#staffdetails").html(msg);
             }
         });
          
        };

        function reload1new (list) {
                
                var staffid1 = $("#selectstaffnew").val();
                var appointmentid1 = $("#appointment").val();
                 $.ajax({
             url: 'StaffappStaffSidebox',
             data: {staffid :staffid1, appointmentid : appointmentid1},
             type: 'get',
             success: function(msg){
                  document.getElementById('staffdetailsnew').style.display = 'block';
                  $("#staffdetailsnew").html(msg);
             }
         });
          
        };

        $(document).ready(function() {
        
        var staffid1 = $("#selectstaff").val();
                var appointmentid1 = $("#appointment").val();
                 $.ajax({
             url: 'StaffappStaffSidebox',
             data: {staffid :staffid1, appointmentid : appointmentid1},
             type: 'get',
             success: function(msg){
                  document.getElementById('staffdetails').style.display = 'block';
                  $("#staffdetails").html(msg);
             }
         });
         
         var staffid2 = $("#selectstaffnew").val();
                var appointmentid2 = $("#appointment").val();
                 $.ajax({
             url: 'StaffappStaffSidebox',
             data: {staffid :staffid2, appointmentid : appointmentid2},
             type: 'get',
             success: function(msg){
                  document.getElementById('staffdetailsnew').style.display = 'block';
                  $("#staffdetailsnew").html(msg);
             }
         });
          
        
                //confirmation dialog defination
                $("#dialog-confirm").dialog({
                        autoOpen : false,
                        show: {
                                effect:"drop",
                                duration: 1000
                        },
                        hide: {
                                effect:"drop",
                                duration: 1000
                        },
                        resizable : false,
                        modal : true,
                        buttons : {
                                "Confirm Appointment" : function() {
                                        $("#newApp").submit();
                                },
                                Cancel : function() {
                                        $(this).dialog("close");
                                }
                        },
                        open : {
                                
                        },
                        close : function(event, ui) {
                                //Cleaup routine to reset the data for the next time the form opens
                                
                        }
                });

                //onclick appointstaff button
                $("#testdialog").click(function() {
                        var checkdate = document.getElementById("inputField").value;
                        
                        if(checkdate != "")
                        {
                        
                        //get all names in listbox
                        var list = document.getElementById("staffnames");
                        var arr = $.map(list.options, function(o){
                                return o.text;
                        });
                        var test = arr.join(', ');
                        
                        //get appointment from dropdownlist
                        var appt = $("#appointment option:selected").text();
                        
                        //set content
                        document.getElementById("dialogmsg").innerText = "Appoint " + test + " as " + appt + "?";
                        
                        //display dialog box
                        $("#dialog-confirm").dialog("open");
                        }
                        else
                        {
                        alert("Please enter effective date.");
                        }
                });
        });
        
        $(document).ready(function() {
                //confirmation dialog defination
                $("#dialog-confirmnew").dialog({
                        autoOpen : false,
                        show: {
                                effect:"drop",
                                duration: 1000
                        },
                        hide: {
                                effect:"drop",
                                duration: 1000
                        },
                        resizable : false,
                        modal : true,
                        buttons : {
                                "Confirm Appointment" : function() {
                                        $("#newApp2").submit();
                                },
                                Cancel : function() {
                                        $(this).dialog("close");
                                }
                        },
                        open : {
                                
                        },
                        close : function(event, ui) {
                                //Cleaup routine to reset the data for the next time the form opens
                                
                        }
                });

                //onclick appointstaff button
                $("#testdialognew").click(function() {
                        var checkdate = document.getElementById("inputField2").value;
                        var table = document.getElementById("specialtable");
                        var rowCount = table.rows.length;
            
            if(checkdate == "")
                        {
                        alert("Please enter effective date.");
                        }
                        else if(rowCount == 0)
                        {
                        alert("Error. There is no staff added.");
                        }
                        else if(checkdate != "" && rowCount != 0 )
                        {
                        //set content
                        document.getElementById("dialogmsgnew").innerText = "Confirm to proceed Appointment(s)?";
                        
                        //display dialog box
                        $("#dialog-confirmnew").dialog("open");
                        }

                        
                });
        });
        
        
                function deleteRow(specialtable) {
            try {
            var table = document.getElementById("specialtable");
            var rowCount = table.rows.length;
 
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
 
 
            }
            }catch(e) {
                alert(e);
            }
        }
        
        
        function addRow(specialtable){
        var table = document.getElementById("specialtable");
        //Get all required data for insert need
        var staffid = document.getElementById("selectstaffnew").value;
        var diplomaid = document.getElementById("diploma").value;
        var apptid = document.getElementById("appointment").value;
        var staffname = $("#selectstaffnew option:selected").text();
        var appt = $("#appointment option:selected").text();
        var diploma = $("#diploma option:selected").text();
        var year = $("#year option:selected").text();
        var yearNo = $("#yearNo option:selected").text();
        var saclass = $("#class option:selected").text();
        classgather();
        var realclass = document.getElementById("classcombinedfortable").value;
        var forexistcc = document.getElementById("diploma").value + $("#year option:selected").text();
        var forexistsl = document.getElementById("diploma").value + $("#yearNo option:selected").text();
        var forexistpm = realclass;
        var forexistcm = document.getElementById("diploma").value;
        
        var checkDIP = document.getElementById("diploma").value;
        if (checkDIP == "")
        {
        alert("Error. Please Select Diploma");
        }
        else
        {
        //For COURSE COORDINATOR
        if(apptid == 101)
        {
        var checkifexist = document.getElementById(forexistcc);
        if(checkifexist != null)
        {
        alert("Error. \nSpecific Diploma & Year has been allocated a Course Coordinator already.");
        }
        
        else
        {
        
                document.getElementById("specialtablerownumber").value = parseInt(document.getElementById("specialtablerownumber").value) + 1;
          var specialtablerownumber = document.getElementById("specialtablerownumber").value;
                //document.getElementById("tbstaffid").style.display="table-cell";
                var row=table.insertRow(0);
                row.id = forexistcc;
                row.className = "blueprocessheader";
                row.name = "row" + specialtablerownumber;
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                var cell4 = row.insertCell(3);
                var cell5 = row.insertCell(4);
                var cell6 = row.insertCell(5);
                var cell7 = row.insertCell(6);
                //generate width
                cell1.width = "5%";
                cell2.width = "20%";
                cell3.width = "35%";
                cell4.width = "10%";
                cell5.width = "10%";
                cell6.width = "10%";
                cell7.width = "10%";
                //insert Data
                //Cell 1 -- Checkbox
                var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            
       //Cell 2 -- Staffname & Hidden is staffid     
         var element2 = document.createElement("input");
                  element2.type = "hidden";
                  element2.name = "staff" + specialtablerownumber ;
                  element2.value = staffid;
                  cell2.innerHTML= staffname ;
                        
                        //Cell 3 Diploma name & Hidden is combine of dipandyear
                        cell3.innerHTML= diploma;
                        
                        //Cell 4 DiplomaID & Hiddenfield is DiplomaID
                        cell4.innerHTML= diplomaid;
                        var element4 = document.createElement("input");
                  element4.type = "hidden";
                  element4.name = "dipcode" + specialtablerownumber ;
                  element4.value = diplomaid;
                        
                        //Cell 5 Year & Hiddenfield is year
                        cell5.innerHTML= year;
                        var element5 = document.createElement("input");
                  element5.type = "hidden";
                  element5.name = "year" + specialtablerownumber ;
                  element5.value = year;
                        
                        cell6.innerHTML= "";
                        //Cell 6 class & hiddenfield is class
                        var element6 = document.createElement("input");
                  element6.type = "hidden";
                  element6.name = "saclass" + specialtablerownumber ;
                  element6.value = "";    
                  
                  
                  cell7.innerHTML= "";
                  //Cell 6 class & hiddenfield is class
                  var element7 = document.createElement("input");
            element7.type = "hidden";
            element7.name = "yearNo" + specialtablerownumber ;
            element7.value = "";   
                  cell1.appendChild(element1);
                  cell2.appendChild(element2);
                  cell4.appendChild(element4);
                  cell5.appendChild(element5);
                  cell6.appendChild(element6);
                  cell7.appendChild(element7);
                }
        
        }       
        
        //For Personal Mentor 
        else if(apptid == 102)
        {
        var checkifexist = document.getElementById(forexistpm);
        if(checkifexist != null)
        {
        alert("Error. \nClass has been allocated with a Personal Mentor already.");
        }
        else
        {
                document.getElementById("specialtablerownumber").value = parseInt(document.getElementById("specialtablerownumber").value) + 1;
          var specialtablerownumber = document.getElementById("specialtablerownumber").value;
                //document.getElementById("tbstaffid").style.display="table-cell";
                var row=table.insertRow(0);
                row.id = forexistpm;
                row.className = "blueprocessheader";
                row.name = "row" + specialtablerownumber;
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                var cell4 = row.insertCell(3);
                var cell5 = row.insertCell(4);
                var cell6 = row.insertCell(5);
                var cell7 = row.insertCell(6);
                //generate width
                cell1.width = "5%";
                cell2.width = "20%";
                cell3.width = "35%";
                cell4.width = "10%";
                cell5.width = "10%";
                cell6.width = "10%";
                cell7.width = "10%";
                //insert Data
                //Cell 1 -- Checkbox
                        var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            cell1.appendChild(element1);
       //Cell 2 -- Staffname & Hidden is staffid     
          var element2 = document.createElement("input");
                  element2.type = "hidden";
                  element2.name = "staff" + specialtablerownumber ;
                  element2.value = staffid;
                  cell2.innerHTML= staffname ;
                        
                //Cell 3 Diploma name
                         cell3.innerHTML= diploma;
                        
                //Cell 4 DiplomaID & Hiddenfield is DiplomaID
                         cell4.innerHTML= diplomaid;
                         var element4 = document.createElement("input");
                  element4.type = "hidden";
                  element4.name = "dipcode" + specialtablerownumber ;
                  element4.value = diplomaid;
                        
                //Cell 5 Year & Hiddenfield is year
                         cell5.innerHTML= year;
                         var element5 = document.createElement("input");
                  element5.type = "hidden";
                  element5.name = "year" + specialtablerownumber ;
                  element5.value = year;
                  
                //Cell 6 class & hiddenfield is class                   
                         cell6.innerHTML= realclass;
                         var element6 = document.createElement("input");
                  element6.type = "hidden";
                  element6.name = "saclass" + specialtablerownumber ;
                  element6.value = realclass;     
                 
                  cell7.innerHTML= "";
                  var element7 = document.createElement("input");
           element7.type = "hidden";
           element7.name = "yearNo" + specialtablerownumber ;
           element7.value = "";  
                        
                         cell1.appendChild(element1);
                  cell2.appendChild(element2);
                  cell4.appendChild(element4);
                  cell5.appendChild(element5);
                  cell6.appendChild(element6);
                  cell7.appendChild(element7);
                }
        
        }
        
        
        //For COURSE Manager
        else if(apptid == 103)
        {
        var checkifexist = document.getElementById(forexistcm);
        if(checkifexist != null)
        {
        alert("Error. \nDiploma has been allocated a Course Manager already.");
        }
        
        else
        {
                document.getElementById("specialtablerownumber").value = parseInt(document.getElementById("specialtablerownumber").value) + 1;
          var specialtablerownumber = document.getElementById("specialtablerownumber").value;
                //document.getElementById("tbstaffid").style.display="table-cell";
                
                var row=table.insertRow(0);
                row.id = forexistcm;
                row.className = "blueprocessheader";
                row.name = "row" + specialtablerownumber;
                
                
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                var cell4 = row.insertCell(3);
                var cell5 = row.insertCell(4);
                var cell6 = row.insertCell(5);
                var cell7 = row.insertCell(6);
                //generate width
                cell1.width = "5%";
                cell2.width = "20%";
                cell3.width = "35%";
                cell4.width = "10%";
                cell5.width = "10%";
                cell6.width = "10%";
                cell7.width = "10%";
                //insert Data
                //Cell 1 -- Checkbox
                var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            cell1.appendChild(element1);
       //Cell 2 -- Staffname & Hidden is staffid     
         var element2 = document.createElement("input");
                  element2.type = "hidden";
                  element2.name = "staff" + specialtablerownumber ;
                  element2.value = staffid;
                  cell2.innerHTML= staffname ;
                        
                        //Cell 3 Diploma name
                        cell3.innerHTML= diploma;
                        
                        //Cell 4 DiplomaID & Hiddenfield is DiplomaID
                        cell4.innerHTML= diplomaid;
                        var element4 = document.createElement("input");
                  element4.type = "hidden";
                  element4.name = "dipcode" + specialtablerownumber ;
                  element4.value = diplomaid;
                        
                        //Cell 5 Year & Hiddenfield is year
                        cell5.innerHTML= "";
                        var element5 = document.createElement("input");
                  element5.type = "hidden";
                  element5.name = "year" + specialtablerownumber ;
                  element5.value = "";
                        
                        cell6.innerHTML= "";
                        //Cell 6 class & hiddenfield is class
                        var element6 = document.createElement("input");
                  element6.type = "hidden";
                  element6.name = "saclass" + specialtablerownumber ;
                  element6.value = "";    
                  
                  
                  cell7.innerHTML= "";
                  //Cell 6 class & hiddenfield is class
                  var element7 = document.createElement("input");
            element7.type = "hidden";
            element7.name = "yearNo" + specialtablerownumber ;
            element7.value = ""; 
            
                  cell1.appendChild(element1);
                  cell2.appendChild(element2);
                  cell4.appendChild(element4);
                  cell5.appendChild(element5);
                  cell6.appendChild(element6);
                  cell7.appendChild(element7);
                                }
                        }     
        
        else if(apptid == 20)
        {
        var checkifexist = document.getElementById(forexistsl);
        if(checkifexist != null)
        {
        alert("Error. \nSpecific Diploma & Year has been allocated a semester team leader already.");
        }
        
        else
        {
        
                document.getElementById("specialtablerownumber").value = parseInt(document.getElementById("specialtablerownumber").value) + 1;
          var specialtablerownumber = document.getElementById("specialtablerownumber").value;
                //document.getElementById("tbstaffid").style.display="table-cell";
                var row=table.insertRow(0);
                row.id = forexistsl;
                row.className = "blueprocessheader";
                row.name = "row" + specialtablerownumber;
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                var cell4 = row.insertCell(3);
                var cell5 = row.insertCell(4);
                var cell6 = row.insertCell(5);
                var cell7 = row.insertCell(6);
                //generate width
                cell1.width = "5%";
                cell2.width = "20%";
                cell3.width = "35%";
                cell4.width = "10%";
                cell5.width = "10%";
                cell6.width = "10%";
                cell7.width = "10%";
                //insert Data
                
                //Cell 1 -- Checkbox
                var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            
       //Cell 2 -- Staffname & Hidden is staffid     
         var element2 = document.createElement("input");
                  element2.type = "hidden";
                  element2.name = "staff" + specialtablerownumber ;
                  element2.value = staffid;
                  cell2.innerHTML= staffname ;
                        
                        //Cell 3 Diploma name & Hidden is combine of dipandyear
                        cell3.innerHTML= diploma;
                        
                        //Cell 4 DiplomaID & Hiddenfield is DiplomaID
                        cell4.innerHTML= diplomaid;
                        var element4 = document.createElement("input");
                  element4.type = "hidden";
                  element4.name = "dipcode" + specialtablerownumber ;
                  element4.value = diplomaid;
                        
                        //Cell 5 Year & Hiddenfield is year
                        cell5.innerHTML="";
                        var element5 = document.createElement("input");
                  element5.type = "hidden";
                  element5.name = "year" + specialtablerownumber ;
                  element5.value = "";
                        
                        cell6.innerHTML= "";
                        //Cell 6 class & hiddenfield is class
                        var element6 = document.createElement("input");
                  element6.type = "hidden";
                  element6.name = "saclass" + specialtablerownumber ;
                  element6.value = "";    
                  
                  cell7.innerHTML= yearNo;
                  //Cell 6 class & hiddenfield is class
                  var element7 = document.createElement("input");
            element7.type = "hidden";
            element7.name = "yearNo" + specialtablerownumber ;
            element7.value = yearNo;   
                  
                  cell1.appendChild(element1);
                  cell2.appendChild(element2);
                  cell4.appendChild(element4);
                  cell5.appendChild(element5);
                  cell6.appendChild(element6);
                  cell7.appendChild(element7);
                }
        
        }       
        
                }
}
        
</script>



<jsp:include page="header.html" />
<!-- Declare sidebar -->
<jsp:include page="t_sidebarappointment.jsp" />

<!-- Main Content -->
<section id="main" class="column">
        <%
                if (request.getParameter("error") != null) {
                        if (request.getParameter("error").equals("1"))
                                out.print("<h4 class='alert_error'>Error - Please fill in all fields.</h4>");
                        else if (request.getParameter("error").equals("2"))
                                out.print("<h4 class='alert_error'>Error - Please ensure effective date is after today.</h4>");
                        else if (request.getParameter("error").equals("-1"))
                                out.print("<h4 class='alert_success'>The appointment has been created successfully.</h4>");
                        else if (request.getParameter("error").equals("4"))
                                out.print("<h4 class='alert_error'>Staff ID : " + request.getParameter("staffid")
                                        + " has exceeded the number of appointments allowed to be allocated.</h4>");
                        else if (request.getParameter("error").equals("3"))
                                out.print("<h4 class='alert_error'>Staff ID : " + request.getParameter("staffid")
                                        + " is already appointed to this appointment.</h4>");
                }
        %>

        <%
                if (request.getParameter("prompt") == null) {
        %>
<article class="module width_3_quarter">
                                <header>
                                <h3>Appoint Staff to Appointment
                                        <table></table>
                                </h3>
                        </header>
                        <div class="module_content">
                                <fieldset>
                                        <!-- to make two field float next to one another, adjust values accordingly -->
                                        <label>Select Appointment</label>
                                        <select name="appointment" id="appointment" onchange="reload(this)">
                                        <option id="nill" value='nill'>
                                        --- Please Select ---
                                        </option>
                                                <%
                  
                                                AppttypeDropdown afd = new AppttypeDropdown(out);
                                                                afd.doGet(request, response);
                                                %>
                                        </select>
                                        
                                </fieldset>
                                </div>

<!-- Normal Form -->
                <form action="StaffAppNew" method="POST" id="newApp" style="display:none">                      
                        <div class="module_content">

                <fieldset style="width: 48%; float: left; margin-right: 3%;">
                                        <!-- to make two field float next to one another, adjust values accordingly -->
                                        <label>Staff</label>
                                
                                        <!-- Drop down list to select staff appointment -->
                                        <select id="selectstaff" class="change" onchange="reload1(this)">
                                                <%
                                                        StaffappStaffDropdown ssd = new StaffappStaffDropdown(out);
                                                                ssd.doGet(request, response);
                                                %>
                                        </select>

                                        <!-- two buttons for adding and removing staff name from textarea -->
                                        <div style="margin-left: 4%; margin-top: 2%">
                                                <button type="button" onclick=addStaff()>Add</button>
                                                <button type="button" onclick=removeStaff()>Remove</button>
                                        </div>
                                </fieldset>
                                
                                <fieldset style="width: 48%; float: right; height: 180px">
                                        <!-- List Box for putting multiple staffs -->
                                        <select id="staffnames" class="change" onchange="reload(this)" size="4"
                                                style="height: 170px; margin-bottom: 2% ; margin-right: 3%; margin-left:3%">
                                        </select>
                                </fieldset>
                                
                                <!-- Side Box for displaying selected staff's appointments -->
                                <div class="sidebox" style="float:left;padding-top:0px;">
                                        <div id="staffdetails"
                                                style="width: 280px; overflow: auto; height: auto; background-color: #F0F0F5; border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-left-radius:5px;border-top-right-radius:5px; padding-left:5px;"></div>
                                        <input name="staff" type="hidden" id="staff" />
                                </div>
                                <div class="clear"></div>
                                
                                 <input type="hidden"
                                                maxlength="70" name="description">
                                                
                                <input type="hidden" name="appointmentnormal" id="appointmentnormal">
                                
                                <fieldset style="width: 48%; float: left; margin-right: 3%;">
                                        <!-- to make two field float next to one another, adjust values accordingly -->
                                        <label>Effective Date</label>
                                        <br />
                                        <br />
                                        <br />
                                        <br /> <input name="effectivedate"
                                        
                                                type="text" id="inputField" style="width:200px; margin-left:10px; 
                                                margin-top:-30px;  position: absolute;" readonly="readonly" />
                                </fieldset>
                                <fieldset style="width: 48%; float: left;">
                                        <!-- to make two field float next to one another, adjust values accordingly -->
                                        <label>End Date - Optional</label>
                                        <br />
                                        <br />
                                        <br />
                                        <br /> 
                                        <input name="enddate" type="text" id="inputField3" style="width:200px; margin-left:10px;
                                                margin-top:-30px;  position: absolute;" readonly="readonly">
                                </fieldset>
                                <div class="clear"></div>                       
                        </div>
                        <footer>
                        
                                <div id="dialog-confirm" title="Confirmation">
                                        
                                                <span class="ui-icon ui-icon-alert"
                                                        style="float: left; margin: 0 7px 20px 0;"></span>
                                                        <div id="dialogmsg">
<!--                                                     Appoint Staff(s): A as B? -->
                                                        </div>
                                                        
                                        
                                </div>
                                
                                <div class="submit_link">
                                        <input type="button" value="Appoint Staff" class="alt_btn" id="testdialog" >
                                                
                        </footer>
                </form>


        <form action="StaffAppNewSpecific" method="POST" id="newApp2" style="display:none">
        <div class="module_content">
        <TABLE class="tablesorter tableproccess" id="headeronly" width="100%" border="0">
        
        <TR >
         <Th style="background-color:#97E2E0;" width="5%"></Th>
            <Th style="background-color:#97E2E0;" width="20%">Staff Names</Th>
            <Th style="background-color:#97E2E0;" width="35%">Diploma</Th>
            <Th style="background-color:#97E2E0;" width="10%">Code</Th>
            <Th style="background-color:#97E2E0;" width="10%">Year</Th>
           
            <Th style="background-color:#97E2E0;" width="10%">Class</Th>
       <Th style="background-color:#97E2E0;" width="10%">Diploma Year</Th>
       </TR>
    </TABLE>
            <TABLE id="specialtable" class="specialtable" width="100%" border="0px">

    </TABLE>
    <input type="hidden" id="specialtablerownumber" name="specialtablerownumber" value="0" />

        
        
        
        
        <fieldset style="width: 48%; float: left; margin-right: 3%;">
                                        <!-- to make two field float next to one another, adjust values accordingly -->
                                        <label>Staff</label>
                                        <!-- Drop down list to select staff appointment -->
                                        <select id="selectstaffnew" name="selectstaffnew" class="change" onchange="reload1new(this)">
                                                <%
                                                        StaffappStaffDropdown ssds = new StaffappStaffDropdown(out);
                                                                ssds.doGet(request, response);
                                                %>
                                        </select>       
                                        </fieldset>
                                        
                                        <fieldset style="width: 48%; float: right;">
                                        
                                        <label>Diploma</label>

                                        <select id="diploma" name="diploma" class="change" size="4" style="height: 125px;width: 265px; margin-bottom: 2% ; margin-right: 3%; margin-left:3%">
                                                <jsp:scriptlet>
                                                DiplomaDropDown dip = new DiplomaDropDown(out);
                                                                dip.doGet(request, response);
                                                </jsp:scriptlet>
                                        </select>
                                </fieldset>
                                        
                                        <!-- Side Box for displaying selected staff's appointments -->
                                <div class="sidebox" style="float:left;padding-top:0px;">
                                        <div id="staffdetailsnew"
                                                style="width: 280px; overflow: auto; height: auto; background-color: #F0F0F5; border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top-left-radius:5px;border-top-right-radius:5px; padding-left:5px;"></div>
                                        <input name="staff" type="hidden" id="staff" />
                                </div>
                                <div class="clear"></div>
                                
                                 <input type="hidden"
                                                maxlength="70" name="description">
                                                
                                <input type="hidden" name="appointmentnormalnew" id="appointmentnormalnew">
                                <input type="hidden" name="classcombinedfortable" id="classcombinedfortable">
                                        
                                        
                        <fieldset style="width: 48%; float: left; margin-right: 3%;">
                                        
                                        <label>Year</label>

                                        <select name="year" id="year" >
                                                <jsp:scriptlet>
                                                YearDropDown year = new YearDropDown(out);
                                                                year.doGet(request, response);
                                                </jsp:scriptlet>
                                        </select>

                                </fieldset>
                     
                            
                        <fieldset style="width: 48%; float: right; ">
                                        
                                        <label>Class <input type="hidden" name="nameclass" id="nameclass"></label> 
                                        
                                        
                                        <select  id="class" name="class" class="change" onchange="classgather(this)">
                                         <option value="01">01</option>
                                         <option value="02">02</option>
                                         <option value="03">03</option>
                                         <option value="04">04</option>
                                         <option value="05">05</option>
                                         <option value="06">06</option>
                                         <option value="07">07</option>
                                         <option value="08">08</option>
                                         <option value="09">09</option>
                                         <option value="10">10</option>
</select>
                </fieldset>
                
                      
                                
                    <fieldset style="width: 48%; float:right;">
                                        
                                        <label> Diploma Year</label>

                                        <select name="yearNo" id="yearNo" >
                                                <jsp:scriptlet>
                                                YearNoDropDown yearNo = new YearNoDropDown(out);
                                                                yearNo.doGet(request, response);
                                                </jsp:scriptlet>
                                        </select>

                                </fieldset>
<fieldset style="width: 48%; float: left; margin-right: 3%;">
                                        <!-- to make two field float next to one another, adjust values accordingly -->
                                        <label>Effective Date</label>
                                        <br />
                                        <br />
                                        <br />
                                        <br /> <input name="effectivedate"
                                                type="text" id="inputField2" style="width:200px; margin-left:10px; 
                                                margin-top:-30px;  position: absolute;" readonly="readonly" />
                                </fieldset>
                                
                                <fieldset style="width: 48%; float: left;">
                                        <!-- to make two field float next to one another, adjust values accordingly -->
                                        <label>End Date - Optional</label>
                                        <br />
                                        <br />
                                        <br />
                                        <br /> <input name="enddate"
                                                type="text" id="inputField4" style="width:200px; margin-left:10px; 
                                                margin-top:-30px;  position: absolute;" readonly="readonly" />
                                </fieldset>
                                <INPUT type="button" value="Remove Staff" onclick="deleteRow('specialtable')" style="float:right; width: 100px" />   
                                <INPUT type="button" value="Add Staff" onclick="addRow('specialtable')" style="float:right; margin-right: 1%; width: 100px" />   
                                
                                <div class="clear"></div>                       
                        </div>
                        <footer>

                                <div id="dialog-confirmnew" title="Confirmation">
                                        
                                                <span class="ui-icon ui-icon-alert"
                                                        style="float: left; margin: 0 7px 20px 0;"></span>
                                                        <div id="dialogmsgnew">
<!--                                                     Appoint Staff(s): A as B? -->
                                                        </div>
                                                        
                                        
                                </div>
                                
                                <div class="submit_link">
                                        <input type="button" value="Appoint Staffs" class="alt_btn" id="testdialognew" >
                        
                                </div>
                        </footer>
                </form>




</article>
        <%
        }
        %>
        
        
</section>